<template>
  <div class="filters" v-if="data.info">
    <el-row
      type="flex"
      class="filters-top"
      justify="space-between"
      align="middle"
    >
      <el-col :span="8">
        单程： {{ data.info.departCity }} - {{ data.info.destCity }} /
        {{ data.info.departDate }}
      </el-col>
      <el-col :span="4">
        <el-select
          size="mini"
          v-model="airport"
          placeholder="起飞机场"
          @change="getFilterList"
        >
          <!--label用于显示在页面  value用于绑定数据,打印数据-->
          <el-option
            v-for="(item, index) in data.options.airport"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flightTimes">
        <el-select
          size="mini"
          v-model="flightTimes"
          placeholder="起飞时间"
          @change="getFilterList"
        >
          <el-option
            v-for="(item, index) in data.options.flightTimes"
            :key="index"
            :label="
              (item.from < 10 ? '0' + item.from : item.from) +
              ':00' +
              '-' +
              (item.to < 10 ? '0' + item.to : item.to) +
              ':00'
            "
            :value="item.from + ',' + item.to"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          size="mini"
          v-model="company"
          placeholder="航空公司"
          @change="getFilterList"
        >
          <el-option
            v-for="(item, index) in data.options.company"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          size="mini"
          v-model="airSize"
          placeholder="机型"
          @change="getFilterList"
        >
          <el-option
            v-for="(item, index) in airSizeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button
        type="primary"
        round
        plain
        size="mini"
        @click="handleFiltersCancel"
      >
        撤销
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //双向绑定的是value
      airport: "",
      flightTimes: "",
      company: "",
      airSize: "",
      airSizeList: [
        {
          label: "大",
          value: "L",
        },
        {
          label: "中",
          value: "M",
        },
        {
          label: "小",
          value: "S",
        },
      ],
    };
  },
  props: ["data"],
  methods: {
    getFilterList() {
      //获取的源数据 全部的机票数据 这个数据传过来就不会改变
      //下面的筛选都是处理这个数据this.data.flights
      let res = this.data.flights;
      //   判断是由使用起飞机场的内容进行过滤
      if (this.airport) {
        //   覆盖之前的res
        res = this.handleAirport(res);
      }
      //   判断是由使用起飞时间的内容进行过滤
      if (this.flightTimes) {
        res = this.handleFlightTimes(res);
        // console.log(res, "handleFlightTimes");
      }
      //   判断是由使用航班公司的内容进行过滤
      if (this.company) {
        res = this.handleCompany(res);
      }
      //   判断是由使用机型的内容进行过滤
      if (this.airSize) {
        res = this.handleAirSize(res);
      }
      //最后将过滤的机票列表数据发送给父组件接收
      this.$emit("sentFilterList", res);
    },
    //  根据获取的起飞机场筛选机票列表
    handleAirport(orginList) {
      //   console.log(value);
      return orginList.filter((filter) => {
        return filter.org_airport_name === this.airport;
      });
    },
    //  根据获取的起飞时间筛选机票列表
    handleFlightTimes(orginList) {
      //   console.log(value);
      //   console.log(this.flightTimes);6-9 不能是9：10起飞，可以是6：10起飞
      return orginList.filter((filter) => {
        // 改造获取的数据进行判断
        // 起飞时间
        const dep_time = Number(filter.dep_time.split(":")[0]);
        // console.log(dep_time, "dep_time");
        //起飞时间的开始和结束时间
        const begin = Number(this.flightTimes.split(",")[0]);
        const end = Number(this.flightTimes.split(",")[1]);

        return dep_time >= begin && dep_time < end;
      });
    },
    //  根据获取的航空公司筛选机票列表
    handleCompany(orginList) {
      //   console.log(value);
      return orginList.filter((filter) => {
        return filter.airline_name === this.company;
      });
    },
    //  根据获取的机型筛选机票列表
    handleAirSize(orginList) {
      //   console.log(value);plane_size
      return orginList.filter((filter) => {
        return filter.plane_size === this.airSize;
      });
    },
    // 撤销 恢复发送请求的机票显示列表这里只要情况筛选的数据即可
    handleFiltersCancel() {
      this.airport = this.flightTimes = this.company = this.airSize = "";
      //   再一次执行筛选函数
      this.getFilterList();
    },
  },
};
</script>

<style scoped lang="less">
.filters {
  margin-bottom: 20px;
}

.filters-top {
  > div {
    /deep/ .el-select {
      margin-left: 10px;
    }
  }
}

.filter-cancel {
  margin-top: 10px;
}
</style>
